<template>
  <view class="flex-col page">
    <view class="flex-col self-stretch group">
      <view class="flex-col justify-start section">
        <view class="flex-col section_2">
          <view class="flex-col">
            <view class="flex-row justify-between items-center section_3"></view>
            <view class="flex-row justify-center items-center relative section_4">
              <image class="image_4 pos" src="@/static/common/i-back-two.png" @click="backToDrama" />
              <text class="text_2">Warrior Badge</text>
            </view>
            <badgeBlock :detailObj="detailObj"></badgeBlock>
          </view>
          <view class="mt-2 flex-col group_4">
            <view class="flex-row justify-center items-center">
              <view class="section_7"></view>
              <text class="ml-12 font_3 text_6">{{$t('drama.rule')}}</text>
              <view class="section_7 ml-12" style="background-image: linear-gradient(90deg, #00f6ff 0%, #00f6ff00 100%)"></view>
            </view>
            <view class="flex-col group_5">
              <text class="self-stretch font_4 text_7">
                {{ detailObj.content }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-col justify-start items-start relative section_8">
        <text class="font_2 text_9">{{$t('drama.cycle')}}</text>
        <view class="flex-col justify-start items-center pos_3">
          <view class="section_9"></view>
          <view class="divider pos_5"></view>
          <view class="divider pos_8"></view>
          <view class="divider pos_11"></view>
        </view>
        <text class="font text_10 pos_4">{{$t('drama.incomeRatio')}}</text>
        <text class="font_2 pos_6">30 {{$t('drama.day')}}</text>
        <text class="font pos_7">1%</text>
        <text class="font_2 pos_9">{{$t('drama.reinvest')}}</text>
        <text class="font pos_10">0.5%</text>
      </view>
    </view>
    <view class="mt-24 flex-col justify-start items-center self-center text-wrapper_2" @click="joinNow">
      <text class="font_3 text_11">{{$t('drama.joinNow')}}</text>
    </view>
    <warriorBadgeModal :isShowModal='isShowModal' @close="handleCloseModal" @join = "handleJoin"></warriorBadgeModal>


  </view>
</template>

<script>
import warriorBadgeModal from './warriorBadgeModal.vue'
import badgeBlock from "./badgeBlock.vue";
export default {
  components: { warriorBadgeModal,badgeBlock },
  props: {},
  computed: {},
  data() {
    return {
      isShowModal: false,
    };
  },

  onLoad(e) {
    this.detailObj = JSON.parse(decodeURIComponent(e.detail));
    console.log(this.detailObj)
  },

  methods: {
    backToDrama() {
      uni.switchTab({
        url: '/pages/drama/index'
      });
    },

    joinNow() {
      this.isShowModal = true;
    },

    handleSelectCycle(item) {
      this.cycleTime = item;
    },
    handleSelectPayment(item) {
      this.paymentType = item;
    },
    handleCloseModal() {
      this.isShowModal = false;
    },
    handleJoin(){
      console.log("���ͼ����ӿ�")
    }
  }
};
</script>

<style scoped lang="scss">
.close-icon {
  position: absolute;
  right: 0;
}

.ml-5 {
  margin-left: 0.31rem;
}

.ml-9 {
  margin-left: 0.56rem;
}

.mt-9 {
  margin-top: 0.56rem;
}

/depp/ .u-popup__content {
  background-color: unset;
}

.select-text {
  color: #00f6ff;
  background-color: #00f6ff33 !important;
  border-color: #00f6ff;
}

.page {
  padding-bottom: 1.25rem;
  background-color: #140c2b;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .group {
    .section {
      background-image: url('@/static/common/b-home.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .section_2 {
        padding-bottom: 11.88rem;
        background-image: linear-gradient(180deg, #140c2b99 0%, #140c2b 100%);

        .section_3 {
          padding: 0.5rem 0.94rem 0.5rem 2.25rem;
          background-color: #33333300;

          .text {
            font-size: 0.75rem;
            line-height: 0.56rem;
          }

          .image {
            width: 1.06rem;
            height: 0.56rem;
          }

          .image_2 {
            width: 0.94rem;
            height: 0.56rem;
          }

          .image_3 {
            width: 1.5rem;
            height: 0.71rem;
          }
        }

        .section_4 {
          padding: 1rem 1rem 0.75rem;
          background-color: #140c2b00;

          .image_4 {
            border-radius: 0.5rem;
            width: 1.78rem;
            height: 1.78rem;
          }

          .pos {
            position: absolute;
            left: 0.98rem;
            top: 50%;
            transform: translateY(-50%);
          }

          .text_2 {
            color: #ffffff;
            font-size: 1.13rem;
            font-family: PingFang SC;
            line-height: 1.06rem;
          }
        }

        .group_2 {
          padding: 0.75rem 0 0.25rem;

          .image_5 {
            border-radius: 3rem;
            filter: drop-shadow(0rem 0.5rem 0.5rem #00000080);
            width: 91.4667vw;
            height: 100vw;
          }

          .section_5 {
            margin: 0.75rem 1rem 0;
            padding: 1.75rem 3.13rem 1.13rem;
            filter: drop-shadow(0rem 0.5rem 0.5rem #00000080);
            background-image: url('@/static/common/b-blage.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .image_5 {
              border-radius: 0.5rem;
              filter: drop-shadow(0rem 0.75rem 0.75rem #00000080);
              width: 15.19rem;
              height: 15.19rem;
            }

            .group {
              padding: 0 0.5rem;

              .text_3 {
                line-height: 1.02rem;
              }

              .section_6 {
                border-radius: 0.63rem 0rem 0.25rem 0.63rem;
                width: 6.81rem;
                height: 1.5rem;

                .text-wrapper_2 {
                  padding: 0.5rem 0 0.25rem;
                  background-image: linear-gradient(105.5deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
                  border-radius: 0.25rem 0rem 0rem 0rem;
                  width: 2.75rem;
                  height: 1.5rem;

                  .text_4 {
                    line-height: 0.69rem;
                  }
                }

                .text_5 {
                  line-height: 0.69rem;
                }
              }

              .text_6 {
                color: #00f6ff;
                line-height: 0.74rem;
              }
            }
          }

          .pos_2 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0.5rem;
          }
        }

        .group_4 {
          padding: 0 1rem;

          .section_7 {
            background-image: linear-gradient(90deg, #00f6ff00 0%, #00f6ff 100%);
            border-radius: 0.063rem;
            width: 8.38rem;
            height: 0.063rem;
          }

          .text_6 {
            color: transparent;
            // line-height: 0.74rem;
            background-image: linear-gradient(103.2deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
            -webkit-background-clip: text;
          }

          .image_7 {
            width: 8.38rem;
            height: 0.063rem;
          }

          .group_5 {
            padding-top: 1.13rem;

            .font_4 {
              font-size: 0.81rem;
              font-family: PingFang SC;
              color: #ffffffb3;
            }

            .text_7 {
              line-height: 1.25rem;
            }

            .text_8 {
              line-height: 1rem;
              width: 18.81rem;
            }
          }
        }
      }
    }

    .section_8 {
      margin: -11.25rem 1rem 0;
      padding: 1rem 0 6rem;
      background-color: #140c2b00;
      border-radius: 1rem;
      border-image-slice: 1;
      border-left: solid 0.031rem #00f6ff80;
      border-right: solid 0.031rem #00f6ff80;
      border-top: solid 0.031rem #00f6ff80;
      border-bottom: solid 0.031rem #00f6ff80;

      .text_9 {
        margin-left: 4.25rem;
        color: #ffffff80;
      }

      .pos_3 {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;

        .section_9 {
          background-color: #37304b;
          width: 0.031rem;
          height: 7.75rem;
        }

        .divider {
          background-color: #37304b;
          height: 0.031rem;
        }

        .pos_5 {
          position: absolute;
          left: 0;
          right: 0;
          top: 2.63rem;
        }

        .pos_8 {
          position: absolute;
          left: 0;
          right: 0;
          top: 5.25rem;
        }

        .pos_11 {
          position: absolute;
          left: 0;
          right: 0;
          // top: 50%;
          transform: translateY(-50%);
        }

        .pos_14 {
          position: absolute;
          left: 0;
          right: 0;
          top: 10.5rem;
        }

        .pos_17 {
          position: absolute;
          left: 0;
          right: 0;
          top: 13.13rem;
        }
      }

      .text_10 {
        color: #ffffff80;
        line-height: 0.6rem;
      }

      .pos_4 {
        position: absolute;
        right: 2.79rem;
        top: 0.97rem;
      }

      .pos_6 {
        position: absolute;
        left: 3.75rem;
        top: 3.6rem;
      }

      .pos_7 {
        position: absolute;
        right: 4.31rem;
        top: 3.6rem;
      }

      .pos_9 {
        position: absolute;
        left: 3.75rem;
        top: 6.22rem;
      }

      .pos_10 {
        position: absolute;
        right: 4.31rem;
        top: 6.22rem;
      }

      .pos_12 {
        position: absolute;
        left: 3.75rem;
        bottom: 6.09rem;
      }

      .pos_13 {
        position: absolute;
        right: 4.38rem;
        bottom: 6.24rem;
      }

      .pos_15 {
        position: absolute;
        left: 3.55rem;
        bottom: 3.46rem;
      }

      .pos_16 {
        position: absolute;
        right: 4.31rem;
        bottom: 3.61rem;
      }

      .pos_18 {
        position: absolute;
        left: 3.47rem;
        bottom: 0.84rem;
      }

      .pos_19 {
        position: absolute;
        right: 4.31rem;
        bottom: 0.99rem;
      }
    }

    .font_2 {
      font-size: 0.81rem;
      font-family: PingFang SC;
      line-height: 0.75rem;
      color: #ffffff;
    }

    .font {
      font-size: 0.81rem;
      font-family: PingFang SC;
      line-height: 0.6rem;
      color: #ffffff;
    }
  }

  .text-wrapper_2 {
    padding: 1rem 0;
    background-image: linear-gradient(307.5deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
    border-radius: 0.75rem;
    width: 13.94rem;

    .text_11 {
      color: #ffffff;
      line-height: 0.74rem;
    }
  }

  .font_3 {
    font-size: 1rem;
    font-family: PingFang SC;
    // line-height: 0.75rem;
  }
}

/deep/ .u-popup__content {
  padding-top: unset;
  background-color: unset;

  .u-modal {
    // background-image: url('@/static/common/b-modal.png');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .u-line {
    display: none;
  }
}

/deep/ .u-modal__content {
  padding-top: unset !important;
}

.section_6 {

  padding: 1.25rem 1rem 1.25rem 1.5rem;
  border-radius: 1.5rem;
  filter: drop-shadow(0rem 0.5rem 0.5rem #00000080);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 90vw;

  .group {
    padding-top: 0.38rem;

    .image_6 {
      width: 1.25rem;
      height: 1.25rem;
    }

    .pos_3 {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .group_2 {
    margin-top: 1.88rem;

    .text_2 {
      line-height: 0.81rem;
    }

    .text-wrapper {
      padding: 0.5rem 0;
      background-color: #ffffff1a;
      border-radius: 0.25rem;
      width: 4.5rem;
      height: 1.5rem;

      .text_3 {
        color: #ffffff33;
      }
    }

    .text-wrapper_2 {
      padding: 0.5rem 0;
      background-color: #00f6ff33;
      border-radius: 0.25rem;
      width: 4.56rem;
      height: 1.56rem;
      border-left: solid 0.031rem #00f6ff;
      border-right: solid 0.031rem #00f6ff;
      border-top: solid 0.031rem #00f6ff;
      border-bottom: solid 0.031rem #00f6ff;
    }

    .font {
      font-size: 0.75rem;
      font-family: PingFang SC;
      line-height: 0.56rem;
      color: #ffffff;
    }

    .text-wrapper_3 {
      background-color: #ffffff33;
      border-radius: 0.25rem;
      width: 4.56rem;
      height: 1.56rem;
      border-left: solid 0.031rem #ffffff4d;
      border-right: solid 0.031rem #ffffff4d;
      border-top: solid 0.031rem #ffffff4d;
      border-bottom: solid 0.031rem #ffffff4d;
    }
  }

  .group_3 {
    margin-top: 1.38rem;
    padding: 0.75rem 0.13rem;
    border-top: solid 0.031rem #ffffff1a;
    border-bottom: solid 0.031rem #ffffff1a;

    .text_5 {
      line-height: 0.8rem;
    }

    .image_7 {
      width: 0.75rem;
      height: 0.75rem;
    }

    .font_4 {
      font-size: 0.88rem;
      font-family: PingFang SC;
      line-height: 0.65rem;
      color: #ffffff;
    }
  }

  .font_3 {
    font-size: 0.88rem;
    font-family: PingFang SC;
    line-height: 0.75rem;
    color: #ffffffb3;
  }

  .group_4 {
    padding: 1.5rem 0 2rem;

    .text-wrapper_4 {
      margin-right: 0.5rem;
      padding: 0.25rem 0;
      background-color: #ffffff1a;
      border-radius: 0.5rem;
      color: #ffffff;

      .font_5 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffff80;
        border: unset;
        width: 100%;
      }

      .fill-input {
        width: unset;

        /deep/ .u-input__content__field-wrapper__field {
          color: #00f6ff !important;
        }

        /deep/ .uni-input-input {
          text-align: center;
        }
      }

      .font_6 {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.75rem;
        color: #ffffff;
      }

      .text_6 {
        // line-height: 0.69rem;
      }
    }
  }

  .text-wrapper_5 {
    padding: 0.88rem 0 0.63rem;
    background-image: linear-gradient(121.2deg, #00f6ff 0%, #8312f2 69.5%, #fb97ad 100%);
    border-radius: 0.75rem;
    width: 10rem;
  }

  .font_2 {
    font-size: 1rem;
    font-family: PingFang SC;
    line-height: 0.92rem;
    color: #ffffff;
  }
}
</style>